<template>
<div id="app">
  <van-nav-bar
  title="房屋详情"
  left-text="旅途"
  left-arrow
  @click-left="onClickLeft"
/>
<detail-banner :banner_data="bannerData"></detail-banner>
<detail-info :info_data="infoData"></detail-info>
<detail-facility :facility_data="facilityData"></detail-facility>
<detail-landlord :landlordData="landlordData"></detail-landlord>
<detail-map :mapData="mapData"></detail-map>
</div>
</template>

<script setup>
import { getDetail } from '@/http/modules/detail'
import { ref } from '@vue/reactivity';
import { computed } from '@vue/runtime-core';
import { useRoute } from 'vue-router';
import detailBanner from './cnps/detail-01-banner.vue'
import detailInfo from './cnps/detail-02-info.vue'
import detailFacility from './cnps/detail-03-facility.vue'
import detailLandlord from './cnps/detail-04-landlord.vue'
import detailMap from './cnps/detail-05-map.vue'
const onClickLeft = () => history.back();
// 获取详情页信息
const route = useRoute();
const data = ref([]);
// 轮播图组件的数据
const bannerData = computed(()=>{
  return data.value?.mainPart?.topModule?.housePicture?.housePics
})
// 房屋信息组件的数据
const infoData = computed(()=>{
  return data.value?.mainPart?.topModule
})
// 房屋设施组件的数据
const facilityData = computed(()=>{
  return data.value?.mainPart?.dynamicModule?.facilityModule?.houseFacility
})
// 房东组件的数据
const landlordData = computed(()=>{
  return data.value?.mainPart?.dynamicModule?.landlordModule
})
const mapData = computed(()=>{
  return data.value?.mainPart?.dynamicModule?.positionModule
})
// 发送网络请求
getDetail(route.params.id).then(res=>{
  data.value=res.data
})
</script>
 
<style lang="less" scoped>
#app{
  --van-nav-bar-icon-color:orange;
  --van-nav-bar-text-color:orange;
  --van-nav-bar-title-text-color:orange;
}
</style>